<template>
    <div style="display: inline-block;">
        <el-button type="primary" icon="el-icon-tickets" @click="_findAccountDataStatusBy" size="small">{{$t('m.button.businessReportAccoun')}}</el-button>
        <div class="headAccount">
            <ul>
                <li v-for="item in findCurrencyExchange" :key="item.key" :title="item.currencyName + ':' + item.exchange">
                    <!-- {{item.currencyName}} -->
                    <template v-if="item.currencyName === 'GBP'">
                        <svg t="1576737917661" class="icon" viewBox="0 0 1536 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2260" ><path d="M0 0h1536v1024H0z" fill="#227FBB" p-id="2261"></path><path d="M173.056 0L1536 908.608V1024h-173.056L0 115.392V0z" fill="#FFFFFF" p-id="2262"></path><path d="M173.056 1024L1536 115.392V0h-173.056L0 908.608V1024z" fill="#FFFFFF" p-id="2263"></path><path d="M0 0v76.928L652.608 512H768zM768 512v-76.928L1420.608 0H1536zM1536 1024v-76.928L883.392 512H768zM0 1024l768-512v76.928L115.392 1024z" fill="#E94B35" p-id="2264"></path><path d="M928 352h608v320H928v352H608V672H0V352h608V0h320v352z" fill="#FFFFFF" p-id="2265"></path><path d="M864 416h672v192H864v416h-192V608H0v-192h672V0h192v416z" fill="#E94B35" p-id="2266"></path></svg>
                    </template>
                    <template v-else-if="item.currencyName === 'EUR'">
                        <svg t="1576737935385" class="icon" viewBox="0 0 1536 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2382"><path d="M0 0h1536v1024H0z" fill="#227FBB" p-id="2383"></path><path d="M768 265.6l-44.32 30.848 15.616-51.68-43.04-32.64 54.016-1.12L768 160l17.728 51.008 54.016 1.12-43.04 32.64 15.616 51.68L768 265.6z m123.2 33.024l-53.824 4.544L876.8 266.208l-20.96-49.792 47.328 26.048L944 207.168l-10.144 53.056 46.208 27.936-53.6 6.72-12.288 52.608-22.976-48.864z m90.176 90.176l-48.864-22.976 52.576-12.288 6.72-53.6 27.968 46.208 53.056-10.144-35.296 40.864 26.048 47.328-49.792-20.96-36.96 39.36 4.544-53.792zM1014.4 512l-30.848-44.32 51.68 15.616 32.64-43.04 1.12 54.016L1120 512l-51.008 17.728-1.12 54.016-32.64-43.04-51.68 15.616L1014.4 512z m-33.024 123.2l-4.544-53.824 36.96 39.392 49.792-20.96-26.048 47.328 35.296 40.864-53.056-10.144-27.936 46.208-6.72-53.6-52.608-12.288 48.864-22.976z m-90.176 90.176l22.976-48.864 12.288 52.576 53.6 6.72-46.208 27.968 10.144 53.056-40.864-35.296-47.328 26.048 20.96-49.792-39.36-36.96 53.792 4.544zM768 758.4l44.32-30.848-15.616 51.68 43.04 32.64-54.016 1.12L768 864l-17.728-51.008-54.016-1.12 43.04-32.64-15.616-51.68L768 758.4z m-123.2-33.024l53.824-4.544-39.392 36.96 20.96 49.792-47.328-26.048-40.864 35.296 10.144-53.056-46.208-27.936 53.6-6.72 12.288-52.608 22.976 48.864z m-90.176-90.176l48.864 22.976-52.576 12.288-6.72 53.6-27.968-46.208-53.056 10.144 35.296-40.864-26.048-47.328 49.792 20.96 36.96-39.36-4.544 53.792zM521.6 512l30.848 44.32-51.68-15.616-32.64 43.04-1.12-54.016L416 512l51.008-17.728 1.12-54.016 32.64 43.04 51.68-15.616L521.6 512z m33.024-123.2l4.544 53.824-36.96-39.392-49.792 20.96 26.048-47.328-35.296-40.864 53.056 10.144 27.936-46.208 6.72 53.6 52.608 12.288-48.864 22.976z m90.176-90.176l-22.976 48.864-12.288-52.576-53.6-6.72 46.208-27.968-10.144-53.056 40.864 35.296 47.328-26.048L659.2 266.24l39.36 36.96-53.792-4.544z" fill="#F2C500" p-id="2384"></path></svg>
                    </template>
                    <template v-else-if="item.currencyName === 'JPY'">
                        <svg t="1576737945336" class="icon" viewBox="0 0 1536 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2500" ><path d="M0 0h1536v1024H0z" fill="#FFFFFF" p-id="2501"></path><path d="M768 512m-320 0a320 320 0 1 0 640 0 320 320 0 1 0-640 0Z" fill="#E94B35" p-id="2502"></path></svg>
                    </template>
                    <template v-else-if="item.currencyName === 'USD'">
                        <svg t="1576737964244" class="icon" viewBox="0 0 1536 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2618"><path d="M0 0h1536v1024H0z" fill="#FFFFFF" p-id="2619"></path><path d="M768 0h768v80H768zM768 314.656h768v80H768zM0 629.344v80h1536v-80zM768 157.344h768v80H768zM768 472v80h768v-80zM0 786.656h1536v80H0zM0 944h1536V1024H0z" fill="#E94B35" p-id="2620"></path><path d="M0 0h768v552H0z" fill="#227FBB" p-id="2621"></path><path d="M64 96l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L64 48l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM192 96l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L192 48l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM320 96l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L320 48l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM448 96l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L448 48l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM576 96l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L576 48l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928z" fill="#FFFFFF" p-id="2622"></path><path d="M576 96l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L576 48l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM640 192l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L640 144l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM128 192l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L128 144l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM256 192l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L256 144l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM384 192l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L384 144l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM512 192l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L512 144l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM704 96l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L704 48l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM64 288l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L64 240l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM192 288l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L192 240l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM320 288l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L320 240l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM448 288l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L448 240l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM576 288l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L576 240l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928z" fill="#FFFFFF" p-id="2623"></path><path d="M576 288l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L576 240l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM640 384l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L640 336l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM128 384l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L128 336l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM256 384l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L256 336l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM384 384l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L384 336l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM512 384l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L512 336l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM704 288l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L704 240l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM64 480l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L64 432l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM192 480l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L192 432l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM320 480l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L320 432l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM448 480l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L448 432l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM576 480l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L576 432l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928z" fill="#FFFFFF" p-id="2624"></path><path d="M576 480l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L576 432l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928zM704 480l-18.816 9.888 3.584-20.928-15.2-14.848 21.024-3.072L704 432l9.408 19.04 21.024 3.072-15.2 14.848 3.584 20.928z" fill="#FFFFFF" p-id="2625"></path></svg>
                    </template>
                    <template v-else-if="item.currencyName === 'CAD'">
                        <svg t="1576737991488" class="icon" viewBox="0 0 1536 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2741"><path d="M0 0h1536v1024H0z" fill="#FFFFFF" p-id="2742"></path><path d="M0 0h288v1024H0zM1248 0h288v1024h-288zM760 192l-54.496 101.344c-6.208 11.008-17.28 9.984-28.352 3.84l-39.456-20.352 29.408 155.648c6.176 28.448-13.664 28.448-23.456 16.16l-68.832-76.864-11.2 39.04c-1.28 5.12-6.944 10.496-15.456 9.216l-87.04-18.24 22.848 82.88c4.896 18.464 8.736 26.08-4.928 30.944l-31.04 14.56 149.888 121.376a19.52 19.52 0 0 1 6.816 20.352l-13.12 42.88c51.584-5.888 97.824-14.816 149.44-20.32 4.576-0.48 12.224 7.04 12.16 12.288L746.4 864h25.088l-3.936-156.928c-0.032-5.248 6.88-13.12 11.424-12.608 51.648 5.504 97.888 14.4 149.472 20.352l-13.12-42.912a19.52 19.52 0 0 1 6.816-20.352l149.888-121.376-31.04-14.56c-13.664-4.864-9.824-12.48-4.928-30.944l22.848-82.88-87.04 18.24c-8.512 1.28-14.176-4.096-15.456-9.216l-11.2-39.04-68.832 76.864c-9.792 12.288-29.632 12.288-23.456-16.16l29.408-155.648-39.456 20.352c-11.072 6.144-22.144 7.168-28.352-3.84L760 192z" fill="#E94B35" p-id="2743"></path></svg>
                    </template>
                    <span>{{Number(item.exchange).toFixed(3)}}</span>
                </li>
            </ul>
        </div>
        <el-dialog :title="$t('m.button.businessReportAccoun')" :visible.sync="dialogTableVisible" width="1100px" >
            <el-table
                :data="tableData"
                v-loading="loading"
                border
                :header-cell-style="getRowClass"
                max-height="450"
            >
                <el-table-column property="recordDate" :label="$t('m.label.date')">
                    <template slot-scope="scope">{{scope.row.recordDate.slice(0, 10)}}</template>
                </el-table-column>
                <el-table-column
                    property="countryName"
                    :label="$t('m.label.country')"
                    column-key="date"
                    :filters="[{text: 'DE', value: 'DE'}, 
                    {text: 'FR', value: 'FR'}, 
                    {text: 'IT', value: 'IT'}, 
                    {text: 'GB', value: 'GB'}, 
                    {text: 'ES', value: 'ES'},
                    {text: 'JP', value: 'JP'},
                    {text: 'US', value: 'US'},
                    {text: 'CA', value: 'CA'}]"
                    :filter-method="filterHandler"
                ></el-table-column>
                <el-table-column property="syncwire" label="Syncwire">
                    <template slot-scope="scope">
                        <span
                            :class="{'yellow':(scope.row.Syncwire||scope.row.SyncwireProducts || scope.row.SyncwireDirect) === 0,'red':(scope.row.Syncwire||scope.row.SyncwireProducts || scope.row.SyncwireDirect) === ''}"
                        >{{(scope.row.Syncwire||scope.row.SyncwireProducts || scope.row.SyncwireDirect) | formatText}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="SyncwireUK" label="SyncwireUK">
                    <template slot-scope="scope">
                        <span
                            :class="{'yellow':scope.row.SyncwireUK === 0,'red':scope.row.SyncwireUK === ''}"
                        >{{scope.row.SyncwireUK | formatText}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="Atumtek" label="Atumtek">
                    <template slot-scope="scope">
                        <span
                            :class="{'yellow':scope.row.Atumtek === 0,'red':scope.row.Atumtek === ''}"
                        >{{scope.row.Atumtek | formatText}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="Addsfit" label="Addsfit">
                    <template slot-scope="scope">
                        <span
                            :class="{'yellow':scope.row.Addsfit === 0,'red':scope.row.Addsfit === ''}"
                        >{{scope.row.Addsfit | formatText}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="Gomum" label="Gomum">
                    <template slot-scope="scope">
                        <span
                            :class="{'yellow':scope.row.Gomum === 0,'red':scope.row.Gomum === ''}"
                        >{{scope.row.Gomum | formatText}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="Fansful" label="Fansful">
                    <template slot-scope="scope">
                        <span
                            :class="{'yellow':scope.row.Fansful === 0,'red':scope.row.Fansful === ''}"
                        >{{scope.row.Fansful | formatText}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="Aracase" label="Aracase">
                    <template slot-scope="scope">
                        <span
                            :class="{'yellow':scope.row.Aracase === 0,'red':scope.row.Aracase === ''}"
                        >{{scope.row.Aracase | formatText}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="Rosesy" label="Rosesy">
                    <template slot-scope="scope">
                        <span
                            :class="{'yellow':scope.row.Rosesy === 0,'red':scope.row.Rosesy === ''}"
                        >{{scope.row.Rosesy | formatText}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
 <script>
import { formatDate } from "assets/js/date";
let vm = {};
export default {
    data() {
        vm = this;
        return {
            loading: true,
            dialogTableVisible: false,
            findCurrencyExchange: [],
            tableData: []
        };
    },
    created() {
        this._findCurrencyExchange();
    },
    filters: {
        // 时间过滤
        formatDate(time) {
            let date = new Date(time);
            return formatDate(date, "yyyy-MM-dd");
        },
        // 数据过滤
        formatText(val) {
            if (val === "") {
                return vm.$t('m.label.noData');
            } else if (val === 0) {
                return  vm.$t('m.label.normalButSales');
            } else if (val === undefined) {
                return "";
            } else {
                return vm.$t('m.label.normal');
            }
        }
    },
    methods: {
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        },
        _findCurrencyExchange() {
            this.$ajax
                .get(
                    
                        this.GLOBAL.businessReportService +
                        "/exchange/findCurrencyExchange"
                )
                .then(res => {
                    this.findCurrencyExchange = res.data.data;
                });
        },
        _findAccountDataStatusBy() {
            this.loading = true;
            this.dialogTableVisible = true;
            this.$ajax
                .get(
                    
                        this.GLOBAL.businessReportService +
                        "/accountDataStatus/findAccountDataStatusByTime"
                )
                .then(res => {
                    this.loading = false;
                    this.filtersData(res.data.data);
                });
        },
        filtersData(data) {
            let map = {},
                tableData = [];
            data.forEach(item => {
                let date = new Date(item.recordTime).getTime();
                if (!map[item.countryName + date]) {
                    tableData.push({
                        recordDate: item.recordTime,
                        countryName: item.countryName,
                        [this.trim(item.sellerName)]: item.sourceValue
                    });
                    map[item.countryName + date] = item;
                } else {
                    tableData.forEach(el => {
                        if (
                            item.countryName + date ===
                            el.countryName + new Date(el.recordDate).getTime()
                        ) {
                            el[this.trim(item.sellerName)] = item.sourceValue;
                        }
                    });
                }
            });
            this.tableData = tableData.sort(
                (a, b) =>
                    new Date(b.recordDate).getTime() -
                    new Date(a.recordDate).getTime()
            );
        },
        trim(str) {
            return str.slice(3).replace(/\s*/g, "");
        },
        filterHandler(value, row, column) {
            const property = column["property"];
            return row[property] === value;
        }
    }
};
</script>
<style lang="stylus" scoped>
    .headAccount{
        display inline-block;
        vertical-align: top;
        padding-top 2px
        ul{
            margin: 0;
            li{
                display inline-block;
                margin-right 20px;
                color: #666666;
                span{
                    display inline-block;
                    vertical-align top
                    font-size 14px;
                    padding-top 1px;
                    line-height 26px;
                }
                svg{
                    display inline-block;
                    vertical-align top
                    width auto;
                    height 26px;
                    border 1px solid #e6e6e6
                }
            }
        }    
    }
    .el-button--primary {
        margin-right: 20px;
    }

    .el-table {
        border: 1px solid #EBEEF5;
    }

    .yellow {
        color: #ffc107;
    }

    .red {
        color: #f44336;
    }
</style>

   